<template>
    <div class="message">
        <div>
            <h1>这是一个出库主题名称+出库单号.</h1>
        </div>
        <div>
            <el-form :inline="true" ref="form" type="text" :model="form" :rules="rules" size="medium"
                label-width="150px" style="margin: 20px 80px 0 10px">
                <el-form-item label="创建人:">
                    <span>{{form.createBy}}</span>

                </el-form-item>

                <el-form-item label="创建时间:">
                    <span>{{form.createTime}}</span>

                </el-form-item>
                <el-form-item label="最后修改人:">
                    <span>{{form.updateBy}}</span>

                </el-form-item>
                <el-form-item label="修改时间:">
                    <span>{{form.updateTime}}</span>
                </el-form-item>
            </el-form>
        </div>

        <h2>基础信息</h2>
        <table class="gongying">
            <tr>
                <td>项目名称:{{form.projectNo}}</td>
                <td>发货计划号:{{form.deliveryPlanNo}}</td>
            </tr>
            <tr>
                <td>发货时间:{{ form.beginDeliverGoodsTime }}</td>
                <td>备注:{{ form.comment }}</td>
            </tr>
        </table>
        <h3 style="font-size: 24px;width: 141px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  margin: 10px  0  0  5px;">构建信息</h3>
        <div style="float: right; ">
            构件总数量：<span style="color:red">
                {{count}}
            </span>
            构件总重量：
            <span style="color:red">
                {{weight}}
            </span>
        </div>
        <!-- 下面表格 -->
        <div class="tables" style="margin-top:20px;">
            <el-form>
                <el-table border  :data="Lit" tooltip-effect="dark" style="width: 100%">
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" prop="id" width="120">
                    </el-table-column>
                    <el-table-column prop="warehouseCompomentNo" label="构建编号" width="120">
                    </el-table-column>
                    <el-table-column prop="compWarehouseName" label="构建名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="构建类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="specifications" label="规格" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="length" label="长度" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="netWeight" label="单净重量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="buildNo" label="楼栋" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="floor" label="楼层" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="stockCount" label="库存数量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="planCount" label="计划发货数量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="actualWeight" label="实际发货数量" show-overflow-tooltip>

                    </el-table-column>


                </el-table>
            </el-form>


        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="Off">关 闭</el-button>
        </div>


    </div>

</template>
<script>

import { getDeliveryPlanInfo } from "@/api/yard/DeliveryPlanInfo";
export default {
    data() {
        return {
            count:0,
            weight:0,
            form: {},
            Lit: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                createBy: null,
                receiptMaterialNo: null,
                categoryName: null,
                supplierTheme: null,
                supplierName: null,
                materialType: null,
                warehouseName: null,
                warehouseArea: null,
                materialPerson: null,
                materialTime: null,
                projectNo: null,
                categoryNo: null,
                specifications: null,
                unit: null,
                materialName: null,
                count: null,
                updateTime: null,
                updateBy: null,
                createTime: null,
                deliveryPlanNo: null,
                deliveryPlanState: null,
                comment: null,
                deliverGoodsTime: null,
                waybillNo: null,
                length:null,
                netWeight:null,
                compWarehouseName: null,
                warehouseCompomentNo: null,
                needCompany: null,
                planWeight: null,
                actualWeight: null,
                planCount: null,
                actualCount: null,
                receivingAddress: null,
                approverBy: null,
                floor:null,
                stockCount:null,
            }
        }
    },
    created() {
        console.log("111111", "query", this.$route.query.id);
        getDeliveryPlanInfo(this.$route.query.id).then((response) => {
            this.form = response.data;
                this.Lit = response.data.compWarehouseInfoList
                let list =response.data.compWarehouseInfoList;
                let count=0;
                let weight=0;
                for(let i=0;i<list.length;i++){
                    let stockCount=list[i].stockCount==undefined ? 0:list[i].stockCount;
                    let w=list[i].netWeight==undefined ? 0:list[i].netWeight;
                    count=count+stockCount;
                    weight=weight+w*stockCount;
                }
                this.count=count;
                this.weight=weight;

        });
    },
    methods: {
        handleUpdate() {
            this.dialogTableVisible = true
        },
        Off() {
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="scss" scoped>
h2 {
    width: 141px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border-bottom: 1px solid red;
    margin: 60px 0 0 5px;

}

.el-input__inner {
    border: 1px solid;
}

.dialog-footer {
    text-align: center;
    margin-top: 15px;

}

.outers .headers {
    width: 100%;
    height: 50px;

    border-bottom: 1px solid gainsboro;

    h1 {
        margin-left: 50px;
        padding-top: 10px;
    }
}

.bottom {
    margin-left: 30px;
    margin-top: 0px;

    .adds {
        display: flex;
        margin-bottom: 10px;
    }
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.message {
    padding-left: 20px;
    width: 50%vh;
    height: 170px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    border: 1px solid gainsboro;
    border-radius: 1rem;
    margin-top: 15px;

    span {
        font-size: 20px;
        margin-right: 120px;
    }
}

.gongying {
    width: 100%;
    text-align: center;

    tr {
        height: 50px;
        line-height: 50px;
    }
}
</style>